<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link href="${pageContext.request.contextPath}/bettery/css/map.css" rel="stylesheet" />
		<title>${initParam.WxAppName}</title>
		<script type="text/javascript" src="${pageContext.request.contextPath}/dewei/js/jquery.js">
</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.validate.min.js">
</script>
		<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=e4e68a5cf6df32793a5c7f00e7d17253">
</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/bettery_common.js">
</script>
	</head>
	<body>
	<div id="preloader"></div>
		<form id='searchForm' method="post">
			<input type="hidden" value="${model.lat}" name='model.lat' id="hiddenLat" />
			<input type="hidden" value="${model.lng}" name='model.lng' id="hiddenLng" />
			<input type="hidden" value="${model.blat}" name='model.blat' id="hiddenbLat" />
			<input type="hidden" value="${model.blng}" name='model.blng' id="hiddenbLng" />
			<input type="hidden" value="${model.mlat}" name='model.mlat' id="hiddenmLat" />
			<input type="hidden" value="${model.mlng}" name='model.mlng' id="hiddenmLng" />
			<input type="hidden" id="tsss">
		</form>
		<div class="search_bar" style="" align="center">
			<span class='new-btn left'><a onclick="closeWindow();">返回</a> </span> 附近维修门店
			<span class="new-btn  right"><a onclick="javascript:changeViewType(this);">列表</a> </span>
		</div>
		<div id='layer' class="mapContent" style='height: 100%; background: #fff; margin-top: 0px; padding-bottom: 0px; top: 45px; position: absolute;' align="center">
			<div class="container" id="span_without_map">
				正在建设中...
			</div>
		</div>
		<div id="map" style='height: 100%; background: #fff; margin-top: 0px; padding-bottom: 0px; top: 45px; position: absolute;'></div>
		<div id='daohangInfo' class="footor_bar" style=''>
			<a href="#" style="float: right; top: 0px; text-decoration: none;" onclick='javascript:$("#daohangInfo").hide();'>点击关闭</a>  
			<div id="result" style='height: 135px; color: #000; bottom: 0px;'></div>
		</div>
		<script type="text/javascript">
var json;
var level = 13;
var isList = false;
var findMarkflag = true;
var map1;
var _lat;
var _lng;
var point;
var point2;
var points = new Array();
var infowindows = new Array();
var route_text, steps;
var polyline, extra_line1, extra_line2;
var infowindowFocus;
$(function()
{
	_lat = $("#hiddenbLat").val();
	_lng = $("#hiddenbLng").val();
	if (_lat && _lng)
	{
	$("#map").hide();
	loadMap();
	}
	else
	{
	$('.loading').css('display', 'inline-block');
	navigator.geolocation.getCurrentPosition(function(position)
	{
		_lat = position.coords.latitude;
		_lng = position.coords.longitude;
		$("#hiddenLng").val(_lng);
		$("#hiddenLat").val(_lat);
		getConvertLatLng(_lat, _lng);
	}, function(error)
	{
		$('#preloader').hide();
		switch (error.code)
		{
			case error.TIMEOUT :
				//alert("获取位置超时！您可通过点击消息界面【左下角键盘按钮】，打开【+】按钮，点击【位置】按钮，手动发送您当前位置");
			$("#layer").show();
			$("#map").hide();
			$("#span_without_map").html("获取位置超时！您可通过点击消息界面【左下角键盘按钮】，打开【+】按钮，点击【位置】按钮，手动发送您当前位置!");
			break;
		case error.PERMISSION_DENIED :
			$("#layer").show();
			$("#map").hide();
			$("#span_without_map").html("您拒绝了使用位置共享服务，查询已取消!");
			break;
		case error.POSITION_UNAVAILABLE :
			$("#layer").show();
			$("#map").hide();
			$("#span_without_map").html("获取位置超时！您可通过点击消息界面【左下角键盘按钮】，打开【+】按钮，点击【位置】按钮，手动发送您当前位置!");
			break;
	}
},
{
	maximumAge : 10000,
	timeout : 10000,
	enableHighAccuracy : true
}   );
	}
	hideLoading();
});
//纠正位置，并载入地图
function getConvertLatLng(lat, lng)
{
	$.getJSON("../gpsparse.jsp",
	{
		lat : lat,
		lng : lng
	}, function(data)
	{
		if (data.error == 0)
		{
		$("#hiddenbLng").val(data.lng);
		$("#hiddenbLat").val(data.lat);
		_lat = $("#hiddenbLat").val();
		_lng = $("#hiddenbLng").val();
		loadMap();
		}
		else
		{
		$('#preloader').hide();
		$("#layer").show();
		$("#map").hide();
		$("#span_without_map").html("获取位置信息失败!");
		}
	});
}
/***gaode map**/
function loadMap()
{
if(map1){
					$("#layer").hide();
					$("#map").show();
				}else if (_lat && _lng) {
					if(!level){level=15;}
					//高德地图
					map1 = new AMap.Map("map",{center:new AMap.LngLat(_lng, _lat),level:level});	// 创建Map实例
					$("#layer").hide();
					$("#map").show();
					AMap.event.addListener(map1,"click",function(e){if(infowindowFocus){infowindowFocus.close();$("#daohangInfo").hide();}});
					//在地图中添加ToolBar插件
					map1.plugin(["AMap.ToolBar"],function(){
						toolBar = new AMap.ToolBar();
						map1.addControl(toolBar);
					});
					point=new AMap.LngLat($("#hiddenbLng").val(),$("#hiddenbLat").val());
					
					var sicon = new AMap.Icon({
				        image: "${pageContext.request.contextPath}/bettery/img/poi.png",
				        size:new AMap.Size(44,44),
				        imageOffset: new AMap.Pixel(-334, -180)
				    });
				    var marker = new AMap.Marker({
				        icon : sicon, //复杂图标
				        visible : true,
				        position:point,
				        map:map1,
				        offset : {
				            x : -16,
				            y : -40
				        }
				    });
					marker.setMap(map1);
					
					addMarker();
					//根据经纬度获取客户地址
					//getaddressByLatLngGaode();
					$("#layer").hide();
					$("#map").show();
				}
			}
			function addMarker(){
				
			
	$.ajax(
	{
		url : "getMakers.do?lat=" + _lat + "&lng=" + _lng + "&t=" + (new Date()),
		dataType : "json",
		success : function(data)
		{
			if (data.success)
			{
			if (data.result.length < 1)
			{
			$("#layer").show();
			$("#map").hide();
			}
			else
			{
			$("#layer").hide();
			$("#map").show();
			findMarkflag = true;
			json = data.result;
			findMarkflag = true;
			if(json){
			for ( var i = 0; i < json.length; i = i + 1) {
					 var html="";
					html += "<table style='font-size:12px;border:0px;'><tr><td style='width:100px;'>推荐门店：</td><td style='width:70%;text-align:left;'><b style='font-size:14px;'>"+ json[i].name+ "</b></td></tr>";
					html += "<tr><td style='vertical-align: top;'>门店地址：</td><td>"+ json[i].address+ "</td></tr>";
					html += "<tr><td style=''>门店电话：</td><td>"+ json[i].lxrTel+ "&nbsp;&nbsp;&nbsp;&nbsp;<span style='border: 1px solid #ccc;border-radius: 4px; margin: 0px 10px;text-align: center;width: 35px'><a style='text-decoration:none;'  href='tel:"+json[i].lxrTel+"'>直接呼叫</a></span> </td></tr>";
					html += "<tr><td colspan='2'><span class='new-btn-blue' ><a style='text-align:center;margin:0px;border:0;padding-left:0px;' onclick='javascript:daohang("+i+");'>导航</a></span></div>";				
					html += "</td></tr></table>";
					
					points[i]=new AMap.LngLat(json[i].longitude,json[i].latitude);
					var marker=new AMap.Marker({
					icon:new AMap.Icon({    //复杂图标
							size:new AMap.Size(28,37),//图标大小
							image:"${pageContext.request.contextPath}/bettery/img/custom_a_j.png?v=1", //大图地址
							imageOffset:new AMap.Pixel(-28*i,0)//相对于大图的取图位置
						}),
					position:points[i]
					});
					marker.setMap(map1);  //在地图上添加点

					infowindows[i] = new AMap.InfoWindow({content:html,size:new AMap.Size(250,130)}); 
					addEvent(marker,json[i].longitude,json[i].latitude, infowindows[i],map1,json[i].address,json[i].id,i,json[i].name,json[i].lxr,json[i].lxrTel);
					if (json[i].tuijian) {
						infowindows[i].open(map1,new AMap.LngLat(json[i].longitude,json[i].latitude));
						map1.panTo(new AMap.LngLat(json[i].longitude,json[i].latitude));  
						infowindowFocus=infowindows[i];
					}
	       }}
			
			}
			}
			else
			{
			$('#preloader').hide();
			$("#span_without_map").hide();
			$("#layer").show();
			$("#map").hide();
			}
		}
	});
		}
			function addEvent(marker,longitude,latitude, infowindow,map1,address,id,i,name,lxr,lxrTel){
				AMap.event.addListener(marker,"click",function(){  
			    	infowindow.open(map1,new AMap.LngLat(longitude,latitude));
			    	point2=new AMap.LngLat(longitude,latitude);
			    	map1.panTo(point2);  
			    	infowindowFocus=infowindows[i];
			    }); 
			}
			function queryMendianList(){
				$("#layer").show();
				$("#map").hide();
				var html ="<div style='margin-top:100px;font-size:14px;'>正在建设中...</div>";
				if(json){
				if (json.length > 0) {
					html = "<div><ul>";
					for ( var i = 0; i < json.length; i = i + 1) {
						var timage='${pageContext.request.contextPath}/bettery/img/category.jpg?v=2';
						var bg='i-bg-red';
						if(json[i].imageUrl){timage=json[i].imageUrl;}
						  html+="<li style='background:#fff;'>";
						  html+="<div class='list-item' style='padding-top:5px;'><div class='p'><img onclick=\"showBigImg('"+timage+"')\" src='"+timage+"' style='height:110px;width:110px;'></div>";
						  html+="<div class='d'>";
						  html+="<div class='title' style='padding-bottom:5px;margin-top: 5px;font-size: 14px;color:#454545'><b>"+json[i].name+"</b></div>";
 
						  html+="<div style='padding-bottom:2px;font-size: 12px;color:#797979'>"+json[i].lxrTel+"<span class='right' style='border: 1px solid #ccc;border-radius: 4px; margin: 0px 10px;text-align: center;width: 35px'><a style='text-decoration:none;'  href='tel:"+json[i].lxrTel+"'>呼叫</a></span></div>";
						  
						  html+="<div  style='font-size: 12px;color:#797979'>"+json[i].address+"</div>";
						  html+="</div>";
						  html+="</div><img src='${pageContext.request.contextPath}/bettery/icons/bottom_1.png' style='margin:0;padding:0;display:block;height:1px;' width='100%'/></li>";
					}
					html+="</ul></div>";
				}
				}
				
				hideLoading();
			    $('#span_without_map').html(html);
			}
			function changeViewType(obj){
				if(isList){
					isList=false;
					loadMap();
					$(obj).html("列表");
				}else{
					isList=true;
					queryMendianList();
					$("#daohangInfo").hide();
					$(obj).html("地图");
				}
			}
			function daohang(i){
				$("#daohangInfo").show();
				point2=points[i];
			    var MWalk;map1.plugin(["AMap.Walking"], function() {MWalk = new AMap.Walking();AMap.event.addListener(MWalk, "complete", driving_routeCallBack);MWalk.search(point, point2);});
			}
//导航结果展示
function driving_routeCallBack(data) {
	if(null!=polyline){
		polyline.hide( );
	}
	if(null!=extra_line1){
	extra_line1.hide( );
	}
	if(null!=extra_line2){
	extra_line2.hide( );
	}
   var routeS = data.routes;
    if (null==routeS||routeS.length <= 0) {
	document.getElementById("result").innerHTML = "未查找到任何结果";
    }
    else{
	     route_text="";
        for(var v =0; v< routeS.length;v++){
            //驾车步骤数
            steps = routeS[v].steps;
            var route_count = steps.length;
            //行车距离（米）
            var distance = routeS[v].distance;
            //拼接输出html
            for(var i=0 ;i< steps.length;i++){
                route_text +=  "&nbsp;"+(1+i) +"." +steps[i].instruction  + "<br/>";
            }
        }        
        document.getElementById("result").innerHTML = route_text;
        drivingDrawLine();
    }  
}
//绘制驾车导航路线
function drivingDrawLine(s) {
    //起点到路线的起点 路线的终点到终点 绘制无道路部分
    var extra_path1 = new Array();
    extra_path1.push(point);
    extra_path1.push(steps[0].path[0]);
    extra_line1 = new AMap.Polyline({
        map: map1,
        path: extra_path1,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeStyle: "dashed",
        strokeDasharray: [10, 5]
    });
 
    var extra_path2 = new Array();
    var path_xy = steps[(steps.length-1)].path;
    extra_path2.push(point2);
    extra_path2.push(path_xy[(path_xy.length-1)]);
    extra_line2 = new AMap.Polyline({
        map: map1,
        path: extra_path2,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeStyle: "dashed",
        strokeDasharray: [10, 5]
    });
     
    var drawpath = new Array();
    for(var s=0; s<steps.length; s++) {
        var plength = steps[s].path.length;
        for (var p=0; p<plength; p++) {
            drawpath.push(steps[s].path[p]);
        }
    }
    polyline = new AMap.Polyline({
        map: map1,
        path: drawpath,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeDasharray: [10, 5]
    });

if(infowindowFocus){infowindowFocus.close();}
//map1.setFitView();
map1.panTo(point); 
}
function showBigImg(img){
        $("<div id='bigImg' style='width:100%;margin-top:45px;'><img style='width:100%' onclick=\"showListImg();\"  src='" + img+ "'/></div>").appendTo("body");$("#bigImg").show();$("#layer").css("background-image","");$("#mendianList").hide();
        $("body").css("background-color","#333");
        var height=document.documentElement.clientHeight-45;

        var imgWidth = $("#bigImg").find("img").width();
        
        $("#span_without_map").hide();

       $("#bigImg").css("line-height",height*1.8-80+"px");
        $("#bigImg").css("height",height+"px");

        $("#bigImg").css("text-align","center");
        var winWidth = document.documentElement.clientWidth;

        $("#bigImg").find("img").css("max-width",winWidth+"px");
    }
function showListImg(){
	$("#bigImg").remove();
	$("#span_without_map").show();
}
function closeWindow() {
	var ua = navigator.userAgent.toLowerCase();
	if (ua.match(/MicroMessenger/i) == "micromessenger") {
		WeixinJSBridge.call('closeWindow');
	} else {
		if (navigator.userAgent.indexOf("MSIE") > 0) {
			if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
				window.opener = null;
				window.close();
			} else {
				window.open('', '_top');
				window.top.close();
			}
		} else if (navigator.userAgent.indexOf("Firefox") > 0) {
			window.location.href = 'about:blank ';
		}
	}
}
		</script>
	</body>
</html>